<template>
  <div class="home-main">
    <div class="container">
      <!-- 轮播图 -->
      <div>
        <swiper
          :options="swiperOption"
          ref="mySwiper"
          style="min-width: 1200px"
        >
          <swiper-slide
            class="swiper-slide swiper-container-3d"
            v-for="(banner, index) in bannerList"
            :key="index"
            style="
              position: relative;
              overflow: hidden;
              width: 100%;
              height: 574px;
            "
          >
            <img
              :src="banner.img"
              style="
                position: absolute;
                top: 0;
                left: 50%;
                width: 1920px;
                height: 574px;
                margin-left: -960px;
              "
            />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <!-- 公司新闻 -->
      <div id="journalism">
        <div class="journalism">
          <div class="w1280 zindex10">
            <!-- <div class="journalism-head">
            </div> -->
            <div class="journalism-data">
              <div class="journalism-banner">
                <swiper
                  :options="swiperOption"
                  ref="mySwiper"
                  style="min-width: 652px; height: 500px"
                >
                  <swiper-slide
                    class="swiper-slide swiper-container-3d"
                    v-for="(banner, index) in bannerList"
                    :key="index"
                    style="
                      position: relative;
                      overflow: hidden;
                      width: 100%;
                      height: 574px;
                    "
                  >
                    <img
                      :src="banner.img"
                      style="
                        position: absolute;
                        top: 0;
                        width: 100%;
                        height: 100%;
                      "
                    />
                  </swiper-slide>
                  <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
              </div>
              <div class="journalism-list">
                <div class="journalism-list-tab">
                  <a
                    @click="handlerChange(item)"
                    v-for="(item, index) in tabList"
                    :key="index"
                    :class="{ active: item.checked }"
                    >{{ item.name }}</a
                  >
                </div>
                <div class="journalism-item show" data-index="0">
                  <ul>
                    <li v-for="item in newsList" :key="item.id">
                      <div class="item-time">
                        <img
                          src="../../assets/point.png"
                          alt=""
                          style="width: 5px; height: 5px; margin-right: 5px"
                        />
                        <p>{{ item.title }}</p>
                      </div>
                      <a class="journalismtx">
                        <span>{{ item.time }}</span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 政策法规和党建园地 -->
      <div id="center-box">
        <div class="centerBox">
          <div class="w1280 zindex10">
            <div class="centerBox-all">
              <div class="centerBox-left">
                <div class="center-title">
                  <div class="title-text">
                    <div class="title-content">
                      <img src="../../assets/icon2.png" alt="" />
                      <span>政策法规</span>
                    </div>
                    <div class="look-more">查看更多></div>
                  </div>
                  <div class="double-line">
                    <div class="line-left"></div>
                    <div class="line-right"></div>
                  </div>
                </div>
                <div class="policy">
                  <ul>
                    <li v-for="item in policyList" :key="item.id">
                      <div class="item-time">
                        <img
                          src="../../assets/point.png"
                          alt=""
                          style="width: 5px; height: 5px; margin-right: 5px"
                        />
                        <p>
                          {{ item.content }}
                        </p>
                      </div>
                      <a class="journalismtx">
                        <span>{{ item.time }}</span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="centerBox-right">
                <div class="center-title">
                  <div class="title-text">
                    <div class="title-content">
                      <img src="../../assets/icon1.png" alt="" />
                      <span>党建园地</span>
                    </div>
                    <div class="look-more">查看更多></div>
                  </div>
                  <div class="double-line">
                    <div class="line-left"></div>
                    <div class="line-right"></div>
                  </div>
                </div>
                <div class="party-building">
                  <div
                    class="party-item underline"
                    v-for="item in buildingList"
                    :key="item.id"
                  >
                    <img :src="item.img" alt="" />
                    <div class="party-detail">
                      <div>{{ item.title }}</div>
                      <div>
                        {{ item.content }}
                      </div>
                      <div>{{ item.time }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 会员名录 -->
      <div id="member">
        <div class="member-box">
          <div class="w1280 zindex10">
            <div class="memberBox">
              <div class="member-title">
                <div>
                  <img src="../../assets/icon3.png" alt="" />
                  <span>会员名录</span>
                </div>
                <div>查看更多></div>
              </div>
              <div class="member-table">
                <table cellspacing="0">
                  <tr>
                    <th>序号</th>
                    <th>企业名称</th>
                    <th>统一社会信用代码</th>
                    <th>归属地区</th>
                    <th>入会级别</th>
                    <th>入会日期</th>
                    <th>操作</th>
                  </tr>
                  <tr align="center">
                    <td>1</td>
                    <td>贵州省融资担保有限责任公司</td>
                    <td>51520000770584540P</td>
                    <td>省级</td>
                    <td>会长单位</td>
                    <td>2023-03-16</td>
                    <td><a href="">详细信息</a></td>
                  </tr>
                  <tr align="center">
                    <td>2</td>
                    <td>贵州省融资担保有限责任公司</td>
                    <td>51520000770584540P</td>
                    <td>省级</td>
                    <td>会长单位</td>
                    <td>2023-03-16</td>
                    <td><a href="">详细信息</a></td>
                  </tr>
                  <tr align="center">
                    <td>3</td>
                    <td>贵州省融资担保有限责任公司</td>
                    <td>51520000770584540P</td>
                    <td>省级</td>
                    <td>会长单位</td>
                    <td>2023-03-16</td>
                    <td><a href="">详细信息</a></td>
                  </tr>
                  <tr align="center">
                    <td>4</td>
                    <td>贵州省融资担保有限责任公司</td>
                    <td>51520000770584540P</td>
                    <td>省级</td>
                    <td>会长单位</td>
                    <td>2023-03-16</td>
                    <td><a href="">详细信息</a></td>
                  </tr>
                  <tr align="center">
                    <td>5</td>
                    <td>贵州省融资担保有限责任公司</td>
                    <td>51520000770584540P</td>
                    <td>省级</td>
                    <td>会长单位</td>
                    <td>2023-03-16</td>
                    <td><a href="">详细信息</a></td>
                  </tr>
                  <tr align="center">
                    <td>6</td>
                    <td>贵州省融资担保有限责任公司</td>
                    <td>51520000770584540P</td>
                    <td>省级</td>
                    <td>会长单位</td>
                    <td>2023-03-16</td>
                    <td><a href="">详细信息</a></td>
                  </tr>
                  <tr align="center">
                    <td>7</td>
                    <td>贵州省融资担保有限责任公司</td>
                    <td>51520000770584540P</td>
                    <td>省级</td>
                    <td>会长单位</td>
                    <td>2023-03-16</td>
                    <td><a href="">详细信息</a></td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 友情链接 -->
      <div id="link">
        <div class="link-box">
          <div class="zindex10" style="width: 70%; margin: 0px auto">
            <div class="linkBox">
              <div class="selector-title">
                <div>友情链接</div>
                <img src="../../assets/right.png" alt="" />
              </div>
              <div class="selector">
                <VueAmazingSelector
                  :options="options"
                  label="label"
                  value="value"
                  placeholder="——  省直机关网站  ——"
                  :disabled="false"
                  :width="326"
                  :height="46"
                  :num="6"
                  allowClear
                  v-model="selectedValue"
                  @change="onChange"
                />
              </div>
              <div class="selector">
                <VueAmazingSelector
                  :options="options"
                  label="label"
                  value="value"
                  placeholder="——  同行机构网站  ——"
                  :disabled="false"
                  :width="326"
                  :height="46"
                  :num="6"
                  allowClear
                  v-model="selectedValue"
                  @change="onChange"
                />
              </div>
              <div class="selector">
                <VueAmazingSelector
                  :options="options"
                  label="label"
                  value="value"
                  placeholder="——  会员单位网站  ——"
                  :disabled="false"
                  :width="326"
                  :height="46"
                  :num="6"
                  allowClear
                  v-model="selectedValue"
                  @change="onChange"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VueAmazingSelector from "@/components/VueAmazingSelector.vue";
export default {
  name: "Home",
  components: {
    VueAmazingSelector,
  },
  data() {
    return {
      options: [
        {
          label: "北京市",
          value: 1,
        },
        {
          label: "上海市上海市上海市上海市",
          value: 2,
        },
        {
          label: "郑州市",
          value: 3,
        },
        {
          label: "纽约市纽约市纽约市纽约市",
          value: 4,
        },
        {
          label: "旧金山",
          value: 5,
        },
        {
          label: "悉尼市",
          value: 6,
        },
        {
          label: "伦敦市",
          value: 7,
        },
        {
          label: "巴黎市",
          value: 8,
        },
      ],
      selectedValue: 0,
      // 新闻tab列表
      tabList: [
        { name: "行业新闻", checked: true },
        { name: "协会动态", checked: false },
        { name: "协会动态", checked: false },
        { name: "协会公告", checked: false },
      ],
      // 轮播图
      bannerList: [
        {
          img: require("../../assets/banner.png"),
        },
        {
          img: require("../../assets/banner.png"),
        },
      ],
      //   新闻列表
      newsList: [
        {
          id: 1,
          title: "380万元！贵州首笔“黔贸贷”落地",
          time: "2023-03-16",
        },
        {
          id: 2,
          title: "380万元！贵州首笔“黔贸贷”落地",
          time: "2023-03-16",
        },
        {
          id: 3,
          title: "380万元！贵州首笔“黔贸贷”落地",
          time: "2023-03-16",
        },
        {
          id: 4,
          title: "380万元！贵州首笔“黔贸贷”落地",
          time: "2023-03-16",
        },
        {
          id: 5,
          title: "380万元！贵州首笔“黔贸贷”落地",
          time: "2023-03-16",
        },
        {
          id: 6,
          title: "380万元！贵州首笔“黔贸贷”落地",
          time: "2023-03-16",
        },
        {
          id: 7,
          title: "380万元！贵州首笔“黔贸贷”落地",
          time: "2023-03-16",
        },
      ],
      //   党建列表
      buildingList: [
        {
          id: 1,
          img: require("../../assets/party.png"),
          title: "学习党的二十大精神 | 奋进新征程，我想对党说",
          content:
            "10月16日，中国共产党第二十次全国代表大会在北京人民大会堂隆重开幕，习近平同志代表第十九届中央委员会向大会作报告...",
          time: "2023-03-16",
        },
        {
          id: 2,
          img: require("../../assets/party.png"),
          title: "学习党的二十大精神 | 奋进新征程，我想对党说",
          content:
            "10月16日，中国共产党第二十次全国代表大会在北京人民大会堂隆重开幕，习近平同志代表第十九届中央委员会向大会作报告...",
          time: "2023-03-16",
        },
      ],
      //   政策列表
      policyList: [
        {
          id: 1,
          content: "黔南州人民政府办公室关于印发黔南州发挥州级担保功能支持...",
          time: "2023-03-16",
        },
        {
          id: 2,
          content: "黔南州人民政府办公室关于印发黔南州发挥州级担保功能支持...",
          time: "2023-03-16",
        },
        {
          id: 3,
          content: "黔南州人民政府办公室关于印发黔南州发挥州级担保功能支持...",
          time: "2023-03-16",
        },
        {
          id: 4,
          content: "黔南州人民政府办公室关于印发黔南州发挥州级担保功能支持...",
          time: "2023-03-16",
        },
        {
          id: 5,
          content: "黔南州人民政府办公室关于印发黔南州发挥州级担保功能支持...",
          time: "2023-03-16",
        },
        {
          id: 6,
          content: "黔南州人民政府办公室关于印发黔南州发挥州级担保功能支持...",
          time: "2023-03-16",
        },
        {
          id: 7,
          content: "黔南州人民政府办公室关于印发黔南州发挥州级担保功能支持...",
          time: "2023-03-16",
        },
      ],
      //   轮播图配置参数
      swiperOption: {
        loop: true, //是否循环轮播
        speed: 1000, //切换速度
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        //自动轮播
        autoplay: {
          delay: 2000,

          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",

          clickable: true, // 允许点击小圆点跳转
        },
      },
    };
  },
  mounted() {},
  watch: {
    selectedValue(to) {
      console.log("selectedValue:", to);
    },
  },
  methods: {
    onChange(value, label, index) {
      console.log("item:", value, label, index);
    },
    // 新闻tabs切换
    handlerChange(item) {
      this.tabList.forEach((ele) => (ele.checked = false));

      item.checked = true;
    },
  },
};
</script>
<style  scoped>
/deep/ .swiper-pagination-bullet {
  width: 40px;
  height: 6px;
  display: inline-block;
  border-radius: 3px;
  background: #fff;
  opacity: 0.8;
}

/deep/ .swiper-pagination-bullet-active {
  opacity: 1;
}

.swiper .swiper-wrapper .show {
  display: flex;
}

.swiper .swiper-wrapper .hide {
  display: none;
}

.team-power .team-leader .leader-item .item-name {
  margin: 20px;
}

/* 公司新闻 */
.journalism {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.journalism-data {
  display: flex;
  flex-direction: row;
  margin-top: 50px;
  margin-bottom: 50px;
}

.journalism-data .journalism-banner {
  flex: 1;
  width: 45%;
  height: 500px;
}

.journalism-data .journalism-list {
  flex: 1;
  width: 45%;
  display: flex;
  flex-direction: column;
  margin-left: 40px;
}

.journalism-data .journalism-list .journalism-list-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #dbdbdb;
}

.journalism-data .journalism-list .journalism-list-tab a {
  flex: 1;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  color: #333333;
  cursor: pointer;
  background-color: #f4f5f8;
}

.journalism-data .journalism-list .journalism-list-tab .active {
  flex: 1;
  height: 50px;
  background: #0056a2;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.journalism-data .journalism-list .journalism-item {
  display: none;
  flex-direction: column;
}

.journalism-data .journalism-list .journalism-item ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.journalism-data .journalism-list .show {
  display: flex;
  height: 100%;
}

.journalism-data .journalism-list .hide {
  display: none;
}

.journalism-data .journalism-list .journalism-item ul li {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #dfdfdf;
  padding: 13px 0;
  justify-content: space-between;
}

.journalism-data .journalism-list .journalism-item ul li .item-time {
  display: flex;
  flex: 8;
  font-size: 16px;
  align-items: center;
  border-radius: 10px;
  width: 80%;
}

.journalism-data .journalism-list .journalism-item ul li .item-time p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 600px;
}

.journalism-data .journalism-list .journalism-item ul li:hover {
  color: #0176df !important;
}

.journalism-data .journalism-list .journalism-item ul li .item-time strong {
  font-size: 32px;
  font-weight: bold;
  color: #0176df;
}

.journalism-data .journalism-list .journalism-item ul li .item-time span {
  font-size: 16px;
  color: #0176df;
}

.journalism-data .journalism-list .journalism-item ul li a {
  flex: 1;
  width: 20%;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
}

.journalism-data .journalism-list .journalism-item ul li a p {
  font-size: 20px;
  font-weight: 400;
  color: #787878;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.journalism-data .journalism-list .journalism-item ul li a span {
  font-size: 16px;
  font-weight: 400;
  color: #787878;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.journalism .look-more {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  width: 10%;
  background-color: rgb(0, 0, 0, 0);
  border: 1px solid #53b448;
  border-radius: 25px;
  text-align: center;
  padding: 5px 0;
  text-decoration: none;
  color: #53b448;
  margin: 30px auto;
}

.journalism .look-more:hover {
  color: #fff;
  background-color: #53b448;
}

/* 中间盒子样式 */
.centerBox {
  background-color: #f5f9fd;
}

.centerBox .centerBox-all {
  display: flex;
  background-color: #ffffff;
  height: 500px;
  margin: 50px 0;
}

.centerBox .centerBox-all .centerBox-left,
.centerBox-right {
  width: 50%;
  overflow: hidden;
}

.centerBox-right {
  margin-left: 40px;
}

.center-title {
  padding-top: 30px;
}

.center-title .title-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
}

.center-title .title-text .title-content {
  color: #121212;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.center-title .title-text .title-content img {
  width: 25px;
  height: 25px;
  margin-right: 4px;
}

.center-title .title-text .look-more {
  color: #666666;
  font-size: 16px;
  cursor: pointer;
}

.center-title .double-line {
  display: flex;
  margin: 13px 0;
}

.center-title .double-line .line-left {
  width: 15%;
  height: 3px;
  background-color: #285cac;
}

.center-title .double-line .line-right {
  width: 85%;
  height: 2px;
  background-color: #dfdfdf;
}

.policy ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.journalism-data .journalism-list .show {
  display: flex;
  height: 100%;
}

.journalism-data .journalism-list .hide {
  display: none;
}

.policy ul li {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #dfdfdf;
  padding: 17px 4px;
  justify-content: space-between;
}

.policy ul li .item-time {
  flex: 8;
  width: 80%;
  display: flex;
  font-size: 16px;
  align-items: center;
  border-radius: 10px;
}

.policy ul li .item-time p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 600px;
}

.policy ul li:hover {
  color: #0176df !important;
}

.policy ul li .item-time strong {
  font-size: 32px;
  font-weight: bold;
  color: #0176df;
}

.policy ul li .item-time span {
  font-size: 16px;
  color: #0176df;
}

.policy ul li a {
  width: 20%;
  flex: 1;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
}

.policy ul li a p {
  font-size: 20px;
  font-weight: 400;
  color: #787878;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.policy ul li a span {
  font-size: 14px;
  font-weight: 400;
  color: #787878;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.centerBox-right .party-building .party-item {
  padding: 25px 0;
  display: flex;
  cursor: pointer;
}

.centerBox-right .party-building .party-item:hover {
  color: #007aff !important;
}

.centerBox-right .party-building .underline {
  border-bottom: 2px dashed #dfdfdf;
}

.centerBox-right .party-building .party-item img {
  width: 200px;
  height: 150px;
}

.centerBox-right .party-building .party-item .party-detail {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.centerBox-right .party-building .party-item .party-detail div:nth-child(1) {
  font-size: 18px;
}

.centerBox-right .party-building .party-item .party-detail div:nth-child(2) {
  color: #666666;
  font-size: 14px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.centerBox-right .party-building .party-item .party-detail div:nth-child(3) {
  color: #666666;
  font-size: 14px;
}

.memberBox {
  margin: 50px 0;
  height: 500px;
}

.memberBox .member-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.memberBox .member-title div:nth-child(1) {
  color: #285cac;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.memberBox .member-title div:nth-child(1) img {
  margin-right: 5px;
}

.memberBox .member-title div:nth-child(2) {
  color: #666666;
  font-size: 16px;
  cursor: pointer;
}

.member-table {
  margin-top: 20px;
}

.member-table table {
  width: 100%;
  font-size: 18px;
}

.member-table table tr th {
  font-size: 16px;
  background-color: #285cac;
  color: #fff;
  font-weight: 400;
  padding: 15px 0;
  border: none;
}

.member-table table tr td {
  font-size: 14px;
  font-weight: 400;
  padding: 18px 0;
  border-bottom: 1px solid #dfdfdf;
}

.member-table table tr td a:link {
  color: #285cac;
}

.member-table table tr td a:visited {
  color: #285cac;
}

input:focus {
  outline: none;
}

.journalismtx > p:hover,
.journalismtx > span:hover {
  color: #0176df !important;
}

/* chrome⾕歌浏览器，Safari苹果浏览器 */
input[name="color"]::-webkit-input-placeholder {
  color: #999999;
  font-size: 18px;
}

/* firefox⽕狐浏览器 */
input[name="color"]:-moz-placeholder {
  color: #999999;
  font-size: 18px;
}

input[name="color"]:-ms-input-placeholder {
  color: #999999;
  font-size: 18px;
}

.link-box {
  background-color: #f5f9fd;
}

.linkBox {
  padding: 50px 0;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.linkBox .selector {
  /* width: 100%; */
  display: flex;
  z-index: 999;
}

.linkBox .selector-title {
  display: flex;
  align-items: center;
}

.linkBox .selector-title div {
  font-size: 18px;
  background-color: #285cac;
  color: #fff;
  width: 132px;
  height: 46px;
  border-radius: 5px;
  justify-content: center;
  display: flex;
  align-items: center;
}
.linkBox .selector-title img {
  width: 14px;
  height: 22px;
}
</style>